<!--标签发行-->
<template>
  <div class="app-container">
    <el-form ref="form" inline :model="form" class="form-options" label-width="100px">
      <el-form-item label="批次号">
        <el-autocomplete
          ref="batchNoRef"
          v-model="form.batchNo"
          :fetch-suggestions="querySearchBatchNo"
          :trigger-on-focus="false"
          clearable
          @select="handleSelectBatchNo"
          @clear="clickClearbatchNoRef"/>
      </el-form-item>
      <el-form-item label="采购单号">
        <el-autocomplete
          ref="purchaseNoRef"
          v-model="form.purchaseNo"
          :fetch-suggestions="querySearchPurchaseNo"
          :trigger-on-focus="false"
          clearable
          @select="handleSelectPurchaseNo"
          @clear="clickClearpurchaseNoRef"/>
      </el-form-item>
      <el-form-item label="操作人">
        <el-autocomplete
          ref="operNameRef"
          v-model="form.operName"
          :fetch-suggestions="querySearchName"
          :trigger-on-focus="false"
          clearable
          @select="handleSelectOperName"
          @clear="clickClearoperNameRef"/>
      </el-form-item>
      <el-form-item label="采购人">
        <el-autocomplete
          ref="purchaseNameRef"
          v-model="form.purchaseName"
          :fetch-suggestions="querySearchName"
          :trigger-on-focus="false"
          clearable
          @select="handleSelectPurchaseName"
          @clear="clickClearpurchaseNameRef"/>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="form.releaseStatus" filterable clearable>
          <el-option
            v-for="item in releaseStatusOptions"
            :key="item.valueId"
            :label="item.valueName"
            :value="item.valueId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="操作时间" class="long-content">
        <el-date-picker
          v-model="form.date"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          align="right">
        </el-date-picker>
      </el-form-item>
      <div class="btns">
        <el-button type="primary" v-permission="['label_issue_query']" @click="onQuery">查询</el-button>
      </div>
    </el-form>
    <el-table
      :data="tableData"
      header-cell-class-name="table-header"
      style="width: 100%;margin-top: 20px">
      <el-table-column
        label="序号"
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop="batchNo"
        label="批次号">
      </el-table-column>
      <el-table-column
        prop="purchaseNo"
        label="采购单号">
      </el-table-column>
      <el-table-column
        prop="orderExplain"
        label="概要说明">
      </el-table-column>
      <el-table-column
        prop="purchaseName"
        label="采购人">
      </el-table-column>
      <el-table-column
        prop="purchaseTime"
        label="采购时间">
      </el-table-column>
      <el-table-column
        prop="releaseStatusName"
        label="状态">
      </el-table-column>
      <el-table-column
        prop="operName"
        label="操作人">
      </el-table-column>
      <el-table-column
        prop="operTime"
        label="操作时间">
      </el-table-column>
      <el-table-column label="操作" width="90">
        <template slot-scope='scope'>
          <el-button type="primary" v-permission="['label_issue_add']" @click="handleOperateClick(scope.row,'发行')">发行
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right;margin-top: 20px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <el-dialog
      title="标签发行"
      top="25px"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="1300px">
      <LabelListComponent
        :form="dataForm"
        ref="LabelListComponent"/>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getUserCondition, getTypes } from '@/api/common'
import { getPurchaseOrders } from '@/api/purchase'
import LabelListComponent from '../../components/LabelListComponent'

export default {
  name: 'LabelIssue',
  components: {
    LabelListComponent
  },
  data() {
    return {
      currentPage: 1,
      total: 0,
      pageSize: 10,
      form: {
        date: '',
        operName: '',
        purchaseName: '',
        releaseStatus: '',
        beginTime: '',
        endTime: '',
        purchaseNo: '',
        batchNo: ''
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      loading: false,
      tableData: [],
      dialogVisible: false,
      purchaseOptions: [],
      releaseStatusOptions: [],
      dataForm: {},
      warehouseInDialogVisible: false,
      warehouseInDataForm: {}
    }
  },
  created() {
    getTypes({ typeId: 'release_status' }).then(res => {
      this.releaseStatusOptions = res.resultData
    })
    this.onQuery()
  },
  methods: {
    handleSizeChange: function(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getTableData()
    },
    handleCurrentChange: function(val) {
      this.currentPage = val
      this.getTableData()
    },
    handleOperateClick(row, tag) {
      if (tag == '发行') {
        this.dataForm = row
        this.dialogVisible = true
      }
    },
    querySearchBatchNo: function(queryString, cb) {
      // 调用 callback 返回建议列表的数据
      const results = []
      cb(results)
    },
    handleSelectBatchNo(item) {
      // console.log(item)
    },
    clickClearbatchNoRef(){
      this.$nextTick(() => {
        if (this.$refs.batchNoRef) {
          this.$refs.batchNoRef.activated = true;
        }
      });
    },
    clickClearpurchaseNoRef(){
      this.$nextTick(() => {
        if (this.$refs.purchaseNoRef) {
          this.$refs.purchaseNoRef.activated = true;
        }
      });
    },
    clickClearoperNameRef(){
      this.$nextTick(() => {
        if (this.$refs.operNameRef) {
          this.$refs.operNameRef.activated = true;
        }
      });
    },
    clickClearpurchaseNameRef(){
      this.$nextTick(() => {
        if (this.$refs.purchaseNameRef) {
          this.$refs.purchaseNameRef.activated = true;
        }
      });
    },
    querySearchPurchaseNo: function(queryString, cb) {
      // 调用 callback 返回建议列表的数据
      const results = []
      cb(results)
    },
    handleSelectPurchaseNo(item) {
      // console.log(item)
    },
    querySearchName: function(queryString, cb) {
      // 调用 callback 返回建议列表的数据
      const results = []
      getUserCondition({ userName: queryString, page: 1, rows: 20 }).then(res => {
        res.resultData.forEach(item => {
          results.push({ id: item.id, value: item.userName })
        })
        cb(results)
      })
    },
    handleSelectOperName(item) {
      this.form.operName = item.value
    },
    handleSelectPurchaseName(item) {
      this.form.purchaseName = item.value
    },
    getTableData() {
      if (this.form.date && this.form.date[0]) {
        this.form.beginTime = this.form.date[0]
      } else {
        this.form.beginTime = ''
      }
      if (this.form.date && this.form.date[1]) {
        this.form.endTime = this.form.date[1]
      } else {
        this.form.endTime = ''
      }
      const param = { page: this.currentPage, rows: this.pageSize }
      Object.assign(param, this.form)
      getPurchaseOrders(param).then(res => {
        this.tableData = res.resultData
        this.total = res.total
      })
    },
    onQuery() {
      this.currentPage = 1
      this.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped>
.line {
  text-align: center;
}
</style>

